<template>
  <div id="divma">
    <el-button id="el-button" type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    <div id="divmale">
      <div id="tablediv">
        <p id="divmlp1"><span>添加会员卡</span></p>
      </div>
      <p>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline">
          <div>
            <p id="mleop1">
              <span style="color: red">*</span>
              会员卡名称：
              <el-input v-model="formInline.gardname" placeholder="请输入"></el-input>
            </p>
            <p id="mleop2">
              备注：
              <el-input v-model="formInline.gardremak" placeholder="请输入"></el-input>
            </p>
            <p id="mleop3">
              充值费用：
              <el-input v-model="formInline.money" placeholder="请输入"></el-input>
            </p>
            <p id="mleop4">
              绑定会员：
            <el-select v-model="formInline.regionuserid" placeholder="选择会员">
              <el-option v-for="(v,i) in arr" :key="i" :label="v.name" :value="v.id"></el-option>
              </el-select>
            </p>
          </div>
          <p id="mleop5">
            会员卡类型：
            <el-select v-model="formInline.region" placeholder="选择会员卡类型">
              <el-option label="次卡类型" value="次卡类型"></el-option>
              <el-option label="期限卡类型" value="期限卡类型"></el-option>
              <el-option label="储值卡类型" value="储值卡类型"></el-option>
            </el-select>
          </p>
          <p id="radioel3">
            <span style="color: red">*</span>支持场馆：
            <el-select v-model="formInline.regionplace" placeholder="选择场馆">
              <el-option v-for="(v,i) in arr2" :key="i" :label="v.spaceName" :value="v.id"></el-option>
            </el-select>
          </p>
          <el-form-item>
            <el-button type="primary" @click="notarize">保存</el-button>
          </el-form-item>
        </el-form>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr2:[],//后台传来的场地
        arr:[],//后台传来的会员类
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        inputVisible: false,
        arrAll:[],
        radio: "1",     //在线购买
        formInline: {  //会员卡名称、会员卡类型数据
          gardname:"",
          region:"",
          gardremak:"",
          regionuserid:"",
          regionplace:"",
          money:""
        },
      };
    },

    methods: {
    back(){
        this.$router.back()
    },

    getgarde(){ //获取会员
      this.$axios({
        url:"gym/user/all",
      }).then((res)=>{
       this.arr= res.data.data;
      })
    },

    getcoach(){  //获取场地
     this.$axios({
      url:"/gym/venue/findAllSpace",
        }).then((res)=>{
       this.arr2= res.data.data;
      })
    },

      notarize(){  //添加接口
        this.$axios({
          url:'/gym/card/add',
          method:"post",
          data:{
            name:this.formInline.gardname,
            userId:this.formInline.regionuserid,
            remarks:this.formInline.gardremak,
            type:this.formInline.region,
            venueId:this.formInline.regionplace,
            balance:this.formInline.money
          }
        }).then((res)=>{
            if (res.data.error) {
                this.$message.error("添加失败！");
              } else {
                this.$message.success("添加成功！");
                this.$router.push('/memberc')
              }
          });
      },
    },

    mounted(){
      this.getgarde();
      this.getcoach()
    }
  };
</script>

<style scoped lang="less">
#el-button{
  margin-left: 92%;
  margin-bottom: 10px;
  background: white;
  color: #b3b3b3;
  border: 1px solid #d3dce6;
}

#divmale {
  margin: 10px;
  border-radius: 5px 5px 0 0;
  border: 2px solid #dad9d9;
};

#tablediv {
  height: 20%;
  background: rgb(219, 219, 219);
  border-radius: 5px 5px 0 0;
  height: 30px;
  span {
    float: left;
    line-height: 30px;
  }
};

#divmlp1{
  margin-left:10px ;
};

.upload-demo {
  width: 300px;
  height: 120px;
  margin: 10px auto;
  margin-top: 30px;
};

.el-icon-upload {
  font-size: 50px;
  width: 50px;
};

.el-form-item {
  margin-left: 50px;
  margin: 30px 0px 0px 50px;
};

.el-form {
  display: inline;
};

.el-input {
  width: 220px;
  margin: 10px;
};

#radioel {
  margin: 20px 10px 10px -20px;
};

#radioel1{
   margin:10px 20px 10px 25px
};

#radioel3{
  margin: 10px 20px 10px 35px;
};

#mlespan2{
  margin: 10px;
};

.block {
  margin-left: 25px;
};

.el-cascader {
  margin: 10px 5px;
  width: 220px;
};

#mlezy {
  margin: 10px 10px 10px 40px;
};

#mlebut1 {
  margin: 10px 10px 10px 50px;
};

#mlebut2 {
  margin: 20px 10px 10px 160px;
};

.el-tag + .el-tag {
  margin-left: 10px;
};

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
};

#mleop1{
  margin: 10px auto;
};

#mleop2{
  margin: 10px auto;
  margin-left: 45px;
};

#mleop3{
  margin: 10px auto;
  margin-left: 25px;
};

#mleop4{
  margin: 20px auto;
  margin-left: 20px;
};

#mleop5{
  margin: 20px auto;
  margin-left: 10px;
};


#el-checkbox{
  margin-left: 20px;
};

</style>